<template>
  <u-popup v-model="show" mode="bottom" border-radius="14" @maskClick="closePhoneFn">
    <view class="empowerPhone_layout">
      <view class="mp_msg_box">
        <image class="logo_img_box" src="https://qqposs.oss-cn-shenzhen.aliyuncs.com/mpAppImg/other/logo.png" alt="">
        <view class="text_box fw6">速速团</view>
        <view class="text_box">申请使用</view>
      </view>
      <view class="copywriting_box1 fw6">你的手机号码</view>
      <view class="copywriting_box2">方便你的好友联系到你</view>
      <view class="btn_list_box">
        <button class="btn_box btn_box_l" hover-class="hover" @click.stop="closePhoneFn">暂不授权</button>
        <button class="btn_box btn_box_r" hover-class="hover" open-type="getPhoneNumber" @getphonenumber="getPhoneNumberFn" @click.stop="closePhoneFn">立即授权</button>
      </view>
    </view>
  </u-popup>
</template>
<script>
import userApi from "@/api/user.js";
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
    }
  },
  methods: {
    closePhoneFn () {
      this.$emit('closePhoneFn', false)
    },
    async getPhoneNumberFn(e) {
      const _this = this
      if (e.detail.errMsg=='getPhoneNumber:ok') {
        userApi.bindMobile({encryptedData:e.detail.encryptedData,iv:e.detail.iv}).then(async (res_) => {
          if (res_.code == 200) {
            let userInfo = _this.$store.state.userInfo
            userInfo = {
              ...userInfo,
              mobile: res_.data
            }
            _this.$store.commit("USERINFO", userInfo)
            _this.$emit('closePhoneFn', false)
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.empowerPhone_layout {
  background-color: #fff;
  padding: 42rpx 48rpx 100rpx 48rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  .mp_msg_box {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #323233;
    .logo_img_box {
      width: 48rpx;
      height: 48rpx;
      border-radius: 50%;
      overflow: hidden;
    }
    .text_box {
      margin-left: 16rpx;
    }
  }
  .copywriting_box1 {
    font-size: 36rpx;
    color: #323233;
    line-height: 48rpx;
    margin-top: 44rpx;
  }
  .copywriting_box2 {
    font-size: 28rpx;
    color: #969799;
    line-height: 40rpx;
    margin-top: 12rpx;
  }
  .btn_list_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 72rpx;
    .btn_box {
      width: 240rpx;
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0;
      margin: 0;
      border-radius: 16rpx;
      &.btn_box_l{
        background: #F2F2F2;
        color: #05C160;
      }
      &.btn_box_r{
        background: #05C160;
        color: #ffffff;
        margin-left: 32rpx;
      }
    }
  }
}
</style>